<html>
<head>
<title>day07-作业-懂车帝-排行榜.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #bbb529;}
.s1 { color: #a9b7c6;}
.s2 { color: #faa23d;}
.s3 { color: #52cb54;}
.s4 { color: #e2da90;}
.s5 { color: #db7e9b;}
.s6 { color: #aa7dfc;}
.s7 { color: #b3e54c;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
day07-作业-懂车帝-排行榜.ets</font>
</center></td></tr></table>
<pre><span class="s0">@</span><span class="s1">Entry</span>
<span class="s0">@</span><span class="s1">Component</span>
<span class="s1">struct Index </span><span class="s2">{</span>
  <span class="s3">//定义数组，存放图片</span>
  <span class="s0">@</span><span class="s1">State list</span><span class="s4">: </span><span class="s1">Resource</span><span class="s5">[] </span><span class="s4">= </span><span class="s5">[</span>
    <span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_nav01'</span><span class="s5">)</span><span class="s4">,</span>
    <span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_nav02'</span><span class="s5">)</span><span class="s4">,</span>
    <span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_nav03'</span><span class="s5">)</span><span class="s4">,</span>
    <span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_nav04'</span><span class="s5">)</span><span class="s4">,</span>
    <span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_nav05'</span><span class="s5">)</span><span class="s4">,</span>
    <span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_nav06'</span><span class="s5">)</span><span class="s4">,</span>
    <span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_nav07'</span><span class="s5">)</span><span class="s4">,</span>
    <span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_nav08'</span><span class="s5">)</span><span class="s4">,</span>
    <span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_nav09'</span><span class="s5">)</span><span class="s4">,</span>
  <span class="s5">]</span>
  <span class="s0">@</span><span class="s1">State text</span><span class="s4">: </span><span class="s1">string</span><span class="s5">[] </span><span class="s4">= </span><span class="s5">[</span><span class="s6">'车系月销榜'</span><span class="s4">, </span><span class="s6">'车系周销榜'</span><span class="s4">, </span><span class="s6">'品牌月销榜'</span><span class="s4">, </span><span class="s6">'品牌周销榜'</span><span class="s5">]</span>
  <span class="s0">@</span><span class="s1">State text1</span><span class="s4">: </span><span class="s1">string</span><span class="s5">[] </span><span class="s4">= </span><span class="s5">[</span><span class="s6">'全部'</span><span class="s4">, </span><span class="s6">'轿车'</span><span class="s4">, </span><span class="s6">'SUV'</span><span class="s4">, </span><span class="s6">'MPV'</span><span class="s4">, </span><span class="s6">'销量飙升'</span><span class="s5">]</span>
  <span class="s3">//点击时图片放大，切换时变回原样</span>
  <span class="s0">@</span><span class="s1">State scaleX</span><span class="s4">: </span><span class="s1">number </span><span class="s4">= </span><span class="s7">1</span>
  <span class="s3">//点击时背景和文字颜色变量</span>
  <span class="s0">@</span><span class="s1">State selectedIndex</span><span class="s4">: </span><span class="s1">number </span><span class="s4">= </span><span class="s7">0</span>
  <span class="s0">@</span><span class="s1">State selectedIndex1</span><span class="s4">: </span><span class="s1">number </span><span class="s4">= </span><span class="s7">0</span>

  <span class="s1">build</span><span class="s5">() </span><span class="s2">{</span>
    <span class="s1">Stack</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">alignContent</span><span class="s4">: </span><span class="s1">Alignment</span><span class="s4">.</span><span class="s1">Top </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
      <span class="s1">Image</span><span class="s5">(</span><span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_bg'</span><span class="s5">))</span>
        <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s6">'100%'</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">height</span><span class="s5">(</span><span class="s7">355</span><span class="s5">)</span>
      <span class="s1">Column</span><span class="s5">() </span><span class="s2">{</span>
        <span class="s1">Row</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">space</span><span class="s4">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
          <span class="s1">Image</span><span class="s5">(</span><span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_back'</span><span class="s5">))</span>
            <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s7">30</span><span class="s5">)</span>
            <span class="s4">.</span><span class="s1">fillColor</span><span class="s5">(</span><span class="s1">Color</span><span class="s4">.</span><span class="s1">White</span><span class="s5">)</span>
          <span class="s1">Blank</span><span class="s5">()</span>
          <span class="s1">Image</span><span class="s5">(</span><span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_taobao_search'</span><span class="s5">))</span>
            <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s7">30</span><span class="s5">)</span>
            <span class="s4">.</span><span class="s1">fillColor</span><span class="s5">(</span><span class="s1">Color</span><span class="s4">.</span><span class="s1">White</span><span class="s5">)</span>
          <span class="s1">Image</span><span class="s5">(</span><span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_edit'</span><span class="s5">))</span>
            <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s7">30</span><span class="s5">)</span>
            <span class="s4">.</span><span class="s1">fillColor</span><span class="s5">(</span><span class="s1">Color</span><span class="s4">.</span><span class="s1">White</span><span class="s5">)</span>
        <span class="s2">}</span>
        <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s6">'100%'</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">padding</span><span class="s5">(</span><span class="s7">20</span><span class="s5">)</span>

        <span class="s1">Column</span><span class="s5">() </span><span class="s2">{</span>
          <span class="s1">Image</span><span class="s5">(</span><span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_cup'</span><span class="s5">))</span>
            <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s7">120</span><span class="s5">)</span>
          <span class="s1">Image</span><span class="s5">(</span><span class="s1">$r</span><span class="s5">(</span><span class="s6">'app.media.ic_homework_rank'</span><span class="s5">))</span>
            <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s7">180</span><span class="s5">)</span>
            <span class="s4">.</span><span class="s1">offset</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">y</span><span class="s4">: -</span><span class="s7">23 </span><span class="s2">}</span><span class="s5">)</span>
        <span class="s2">}</span>
        <span class="s4">.</span><span class="s1">alignItems</span><span class="s5">(</span><span class="s1">HorizontalAlign</span><span class="s4">.</span><span class="s1">Center</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">justifyContent</span><span class="s5">(</span><span class="s1">FlexAlign</span><span class="s4">.</span><span class="s1">Center</span><span class="s5">)</span>

        <span class="s1">List</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">space</span><span class="s4">: </span><span class="s7">15 </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
          <span class="s1">ForEach</span><span class="s5">(</span><span class="s1">this</span><span class="s4">.</span><span class="s1">list</span><span class="s4">, </span><span class="s5">(</span><span class="s1">item</span><span class="s4">: </span><span class="s1">Resource</span><span class="s4">, </span><span class="s1">index</span><span class="s4">: </span><span class="s1">number</span><span class="s5">) </span><span class="s4">=&gt; </span><span class="s2">{</span>
            <span class="s1">ListItem</span><span class="s5">() </span><span class="s2">{</span>
              <span class="s1">Image</span><span class="s5">(</span><span class="s1">item</span><span class="s5">)</span>
                <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s7">60</span><span class="s5">)</span>
                <span class="s4">.</span><span class="s1">scale</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">x</span><span class="s4">: </span><span class="s1">this</span><span class="s4">.</span><span class="s1">scaleX </span><span class="s4">== </span><span class="s1">index </span><span class="s4">? </span><span class="s7">1.5 </span><span class="s4">: </span><span class="s7">1</span><span class="s4">, </span><span class="s1">y</span><span class="s4">: </span><span class="s1">this</span><span class="s4">.</span><span class="s1">scaleX </span><span class="s4">== </span><span class="s1">index </span><span class="s4">? </span><span class="s7">1.5 </span><span class="s4">: </span><span class="s7">1 </span><span class="s2">}</span><span class="s5">)</span>
                <span class="s4">.</span><span class="s1">onClick</span><span class="s5">(() </span><span class="s4">=&gt; </span><span class="s2">{</span>
                  <span class="s1">this</span><span class="s4">.</span><span class="s1">scaleX </span><span class="s4">= </span><span class="s1">index</span>
                <span class="s2">}</span><span class="s5">)</span>
            <span class="s2">}</span>
          <span class="s2">}</span><span class="s5">)</span>
        <span class="s2">}</span>
        <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s6">'100%'</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">height</span><span class="s5">(</span><span class="s7">50</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">listDirection</span><span class="s5">(</span><span class="s1">Axis</span><span class="s4">.</span><span class="s1">Horizontal</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">scrollBar</span><span class="s5">(</span><span class="s1">BarState</span><span class="s4">.</span><span class="s1">On</span><span class="s5">)</span>

        <span class="s3">// Row({ space: 10 }) {</span>
        <span class="s3">//   ForEach(this.text, (item: string) =&gt; {</span>
        <span class="s3">//     Text(item)</span>
        <span class="s3">//       .height('100%')</span>
        <span class="s3">//       .backgroundColor(Color.White)</span>
        <span class="s3">//       .borderRadius({ topLeft: 5, topRight: 5 })</span>
        <span class="s3">//       .padding({ left: 10, right: 10 })</span>
        <span class="s3">//   })</span>
        <span class="s3">// }</span>
        <span class="s3">// .width('100%')</span>
        <span class="s3">// .height(65)</span>
        <span class="s3">// .backgroundColor('#1A3B65')</span>
        <span class="s1">Grid</span><span class="s5">() </span><span class="s2">{</span>
          <span class="s1">ForEach</span><span class="s5">(</span><span class="s1">this</span><span class="s4">.</span><span class="s1">text</span><span class="s4">, </span><span class="s5">(</span><span class="s1">item</span><span class="s4">: </span><span class="s1">string</span><span class="s4">, </span><span class="s1">index</span><span class="s4">: </span><span class="s1">number</span><span class="s5">) </span><span class="s4">=&gt; </span><span class="s2">{</span>
            <span class="s1">GridItem</span><span class="s5">() </span><span class="s2">{</span>
              <span class="s1">Text</span><span class="s5">(</span><span class="s1">item</span><span class="s5">)</span>
                <span class="s4">.</span><span class="s1">height</span><span class="s5">(</span><span class="s6">'100%'</span><span class="s5">)</span>
                <span class="s4">.</span><span class="s1">backgroundColor</span><span class="s5">(</span><span class="s1">this</span><span class="s4">.</span><span class="s1">selectedIndex </span><span class="s4">== </span><span class="s1">index </span><span class="s4">? </span><span class="s1">Color</span><span class="s4">.</span><span class="s1">White </span><span class="s4">: </span><span class="s6">''</span><span class="s5">)</span>
                <span class="s4">.</span><span class="s1">borderRadius</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">topLeft</span><span class="s4">: </span><span class="s7">5</span><span class="s4">, </span><span class="s1">topRight</span><span class="s4">: </span><span class="s7">5 </span><span class="s2">}</span><span class="s5">)</span>
                <span class="s4">.</span><span class="s1">padding</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">left</span><span class="s4">: </span><span class="s7">10</span><span class="s4">, </span><span class="s1">right</span><span class="s4">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s5">)</span>
                <span class="s4">.</span><span class="s1">textAlign</span><span class="s5">(</span><span class="s1">TextAlign</span><span class="s4">.</span><span class="s1">Center</span><span class="s5">)</span>
                <span class="s4">.</span><span class="s1">fontColor</span><span class="s5">(</span><span class="s1">this</span><span class="s4">.</span><span class="s1">selectedIndex </span><span class="s4">== </span><span class="s1">index </span><span class="s4">? </span><span class="s1">Color</span><span class="s4">.</span><span class="s1">Black </span><span class="s4">: </span><span class="s1">Color</span><span class="s4">.</span><span class="s1">White</span><span class="s5">)</span>
                <span class="s4">.</span><span class="s1">onClick</span><span class="s5">(() </span><span class="s4">=&gt; </span><span class="s2">{</span>
                  <span class="s1">this</span><span class="s4">.</span><span class="s1">selectedIndex </span><span class="s4">= </span><span class="s1">index</span>
                <span class="s2">}</span><span class="s5">)</span>
            <span class="s2">}</span>
          <span class="s2">}</span><span class="s5">)</span>
        <span class="s2">}</span>
        <span class="s4">.</span><span class="s1">scrollBar</span><span class="s5">(</span><span class="s1">BarState</span><span class="s4">.</span><span class="s1">Off</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">columnsGap</span><span class="s5">(</span><span class="s7">10</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">rowsTemplate</span><span class="s5">(</span><span class="s6">'1fr'</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s6">'100%'</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">height</span><span class="s5">(</span><span class="s7">65</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">backgroundColor</span><span class="s5">(</span><span class="s6">'#1A3B65'</span><span class="s5">)</span>

        <span class="s1">Row</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">space</span><span class="s4">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
          <span class="s1">ForEach</span><span class="s5">(</span><span class="s1">this</span><span class="s4">.</span><span class="s1">text1</span><span class="s4">, </span><span class="s5">(</span><span class="s1">item1</span><span class="s4">: </span><span class="s1">string</span><span class="s4">, </span><span class="s1">index</span><span class="s4">: </span><span class="s1">number</span><span class="s5">) </span><span class="s4">=&gt; </span><span class="s2">{</span>
            <span class="s1">Text</span><span class="s5">(</span><span class="s1">item1</span><span class="s5">)</span>
              <span class="s4">.</span><span class="s1">backgroundColor</span><span class="s5">(</span><span class="s1">this</span><span class="s4">.</span><span class="s1">selectedIndex1 </span><span class="s4">== </span><span class="s1">index </span><span class="s4">? </span><span class="s6">'#FEC446' </span><span class="s4">: </span><span class="s6">'#F5F6FA'</span><span class="s5">)</span>
              <span class="s4">.</span><span class="s1">borderRadius</span><span class="s5">(</span><span class="s7">5</span><span class="s5">)</span>
              <span class="s4">.</span><span class="s1">padding</span><span class="s5">(</span><span class="s7">10</span><span class="s5">)</span>
              <span class="s4">.</span><span class="s1">onClick</span><span class="s5">(() </span><span class="s4">=&gt; </span><span class="s2">{</span>
                <span class="s1">this</span><span class="s4">.</span><span class="s1">selectedIndex1 </span><span class="s4">= </span><span class="s1">index</span>
              <span class="s2">}</span><span class="s5">)</span>
          <span class="s2">}</span><span class="s5">)</span>
        <span class="s2">}</span>
        <span class="s4">.</span><span class="s1">padding</span><span class="s5">(</span><span class="s2">{ </span><span class="s1">left</span><span class="s4">: </span><span class="s7">10</span><span class="s4">, </span><span class="s1">right</span><span class="s4">: </span><span class="s7">10</span><span class="s4">, </span><span class="s1">top</span><span class="s4">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s5">)</span>
        <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s6">'100%'</span><span class="s5">)</span>
      <span class="s2">}</span>
      <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s6">'100%'</span><span class="s5">)</span>
    <span class="s2">}</span>
    <span class="s4">.</span><span class="s1">width</span><span class="s5">(</span><span class="s6">'100%'</span><span class="s5">)</span>

  <span class="s2">}</span>
<span class="s2">}</span></pre>
</body>
</html>